<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>选择你喜欢的鼠标</title>
    <style>
        * {
            font-size: 16px;
            font-family: "Arial", "微软雅黑";
            line-height: 25px;
        }

        div {
            padding: 5px;
            text-align: center;
            width: 300px;
            display: inline;
        }

        img {
            width: 300px;
        }

        div span {
            display: block;
        }

        .mouse-title {
            font-size: 20px;
        }
    </style>
</head>

<body>
    <p> <span class="mouse-title">选择你喜欢的鼠标：</span> <br><input type="radio" name="mouse" onclick="mouse()">罗技——轨迹球<br>
        <input type="radio" name="mouse" onclick="mouse()">雷蛇——游戏鼠
    </p>
    <div id="a"></div>


    <script>
        // 创建和插入操作
        // createElement("标签名称")  创建对应的标签
        // a.appendChild(B)    把B添加到A 的后面
        // insertBefore(a,b)    把A插入到B之前
        // cloneNode(deep)   deep=true==本节点属性以及其子节点/false  ===只复制根节点和属性，不复制子节点

        function mouse() {
            let ele = document.getElementsByName("mouse")
            let bnode = document.getElementById("a");
            // console.log(bnode);           
            if (ele[0].checked) {
                console.log('111111');
                let img = document.createElement("img");////标签名字div p img h1
                console.log(img);

                img.setAttribute("src", "images/gj.jpg");
                img.setAttribute("alt", "罗技鼠标");

                bnode.appendChild(img);

            } else {
                console.log('2222222');
                let img = document.createElement("img");
                console.log(img);
                img.setAttribute("src", "images/ls.jpg");
                img.setAttribute("alt", "雷蛇鼠标");
                img.setAttribute("onclick", "copy()");
                bnode.appendChild(img);
            }
        }

        function copy(){
            let bnode = document.getElementById("a");
            let copy = bnode.lastElementChild.cloneNode(false);
            bnode.insertBefore(copy,bnode.firstElementChild);
        }

    </script>

</body>

</html>